<template>
    <div class="order-detail detail">
        <h3>订单详情</h3>
        <div class="section">
            <table id="main" v-if="types == 'trans'">
                <tr>
                    <td>订单编号</td>
                    <td>
                        <div class="lisId">{{detail.sn}}</div>
                        <span class="badge" :class="$root.$data.sOrderAttr[detail.attribute].style">{{$root.$data.sOrderAttr[detail.attribute].badge}}</span>
                    </td>
                </tr>
                <tr>
                    <td>发单人/时间</td>
                    <td>{{detail.founder}} / {{detail.createdtime}}</td>
                </tr>
                <tr v-if="detail.isHis">
                    <td>发布时间</td>
                    <td>{{detail.hiscreatedtime}}</td>
                </tr>
                <tr v-if="detail.isAppoint" class="yyd">
                    <td>预约时间</td>
                    <td><div>{{detail.appointment}}</div></td>
                </tr>
                <tr>
                    <td>输送类别</td>
                    <td>{{detail.classifyname}}</td>
                </tr>
                <tr>
                    <td>输送项目</td>
                    <td  class="red">{{detail.catalogname}}</td>
                </tr>
                <tr>
                    <td>数量</td>
                    <td>{{detail.quantity}}</td>
                </tr>
                <tr>
                    <td>输送起点</td>
                    <td>{{detail.startaddress}} 床号：{{detail.startbed}}</td>
                </tr>
                <tr>
                    <td>输送终点</td>
                    <td>{{detail.finishaddress}} 床号：{{detail.finishbed}}</td>
                </tr>
                <tr>
                    <td>输送设备</td>
                    <td>
                        <span v-if="detail.tackle != ''">{{detail.tackle}}</span>
                        <span v-if="detail.tackle == ''">无</span>
                    </td>
                </tr>
                <tr>
                    <td>是否往返</td>
                    <td>
                        <span v-if="detail.isback == 0">送</span>
                        <span v-if="detail.isback == 1">回</span>
                        <span v-if="detail.isback == 2">送和回</span>
                    </td>
                </tr>
                <tr>
                    <td>指派接单</td>
                    <td><span v-for="item in detail.receive">{{item.receive}} </span></td>
                </tr>
                <tr>
                    <td>订单备注</td>
                    <td>
                        <div v-if="detail.attribute == 12">
                            {{detail.message.replace('@@',' - ')}}
                        </div>
                        <div v-if="detail.attribute != 12">
                            <div>{{detail.message}}</div>
                        </div>
                    </td>
                </tr>
                <tr class="white-bg">
                    <td>订单状态</td>
                    <td>
                        <div v-if="detail.attribute == 12">
                            <span v-if="detail.receive.length == 0">待分配</span>
                            <span v-if="detail.receive.length > 0">已接单</span>
                        </div>
                        <div v-if="detail.attribute != 12">
                            <span v-if="detail.statu == 2">{{detail.completetime}} </span>  <span >{{$root.$data.sStatus[detail.statu]}}</span>
                            <div v-if="detail.attribute==4 || detail.attribute==9">销单人：{{detail.cancelname}}</div>
                        </div>
                    </td>
                </tr>
                <tr class="order-jd">
                    <td>订单进度</td>
                    <td style="position: static;">
                        <!--<div v-for="item in detail.time_flow">{{item.created_at}} {{item.uname}} ：{{item.action}}</div>-->
                        <fullow-up-ss
                            :value-data="detail.time_flow"
                        ></fullow-up-ss>
                    </td>
                </tr>
                <tr>
                    <td>派单时间</td>
                    <td>{{detail.dispatch_time}}</td>
                </tr>
                <tr>
                    <td>接单时间</td>
                    <td>{{detail.received_time}}</td>
                </tr>
                <tr>
                    <td>响应时间</td>
                    <td>{{detail.received_sec == 0  ? '':received_sec}}</td>
                </tr>
                <tr>
                    <td>完成时间</td>
                    <td>{{detail.statu == 2 ? detail.completetime:''}}</td>
                </tr>
                <tr>
                    <td>完成耗时</td>
                    <td>{{detail.finshed_sec == 0 ? '':finshed_sec}}</td>
                </tr>
                <tr>
                    <td>评价</td>
                    <td v-if="detail.evaluation == '0'">暂未评价</td>
                    <td v-if="detail.evaluation == '1'"><img :src="detail.evaIcon" alt=""> 意见及建议：{{detail.evaluation_txt}}</td>
                    <td v-if="detail.evaluation == '2'"><img :src="detail.evaIcon" alt=""> 好评</td>
                </tr>
            </table>
            <table id="main-mt" v-if="types == 'mtain'">
                <tr>
                    <td>订单编号</td>
                    <td>
                        <div class="lisId">{{detail.sn}}</div>
                        <span class="badge" :class="$root.$data.wOrderAttr[detail.tsid].style">{{$root.$data.wOrderAttr[detail.tsid].badge}}</span>
                    </td>
                </tr>
                <tr>
                    <td>申报人/时间</td>
                    <td>{{detail.applicant}} / {{detail.createdtime}}</td>
                </tr>
                <tr>
                    <td>维修大类</td>
                    <td>{{detail.bigclassfyname}}</td>
                </tr>
                <tr>
                    <td>维修小类</td>
                    <td  class="red">{{detail.smallclassfyname}}</td>
                </tr>
                <tr>
                    <td>申报科室</td>
                    <td>{{detail.department}}</td>
                </tr>
                <tr>
                    <td>位置</td>
                    <td>{{detail.site}}</td>
                </tr>
                <tr class="deal-bg">
                    <td>处理人</td>
                    <td v-if="detail.dealwith.length > 0">
                        <span v-for="(item, index) in detail.dealwith" :key="index">{{item.name}}，{{item.phone}}</span>
                    </td>
                    <td v-if="detail.dealwith.length == 0">
                        <span v-if="detail.attribute == 1 && ( detail.sattribute == 1 || detail.sattribute == 0)">待主管分配</span>
                    </td>
                </tr>
                <tr>
                    <td>下单备注</td>
                    <td>
                        <div>{{detail.des == '' ? '暂无备注' : detail.des}}</div>
                    </td>
                </tr>
                <tr class="white-bg">
                    <td>订单状态</td>
                    <td>
                        <span v-if="detail.is_suspend == 1 && detail.tsid != 3">挂单</span>
                        <div v-else>
                            <div v-if="detail.statu==0">
                                <span v-if="detail.attribute == 1">{{detail.sattribute == 1?'待主管分配':'待分配'}}</span>
                                <span v-if="detail.attribute == 2">待接单</span>
                            </div>
                            <span v-if="detail.statu==1">{{detail.attribute == 5?'等耗材':'待完成'}}</span>
                            <span v-if="detail.statu==3">待完成,待主管审核通过</span>
                            <span v-if="detail.statu==2 && detail.attribute != 3 && detail.attribute != 4 && detail.attribute != 5">已完成</span>
                            <span v-if="detail.attribute == 3">完成，待评价</span>
                            <span v-if="detail.attribute == 4">{{detail.completetime}} 完成，已评价</span>
                            <span v-if="detail.statu==2 && detail.attribute == 5">服务已转交</span>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="no-position">
                        进度轨迹
                    </td>
                    <td>
                        <fullow-up
                            :value-data="detail.followup"
                            @show-img="showImgFn"
                        ></fullow-up>
                    </td>
                </tr>
                <tr>
                    <td>耗材</td>
                    <td>
                        <div v-if="detail.consumable.length == 0">暂无耗材</div>
                        <div v-if="detail.consumable.length > 0">
                            <div class="consumable" v-for="(item, index) in detail.consumable" :key="index" @click="showConsumable">
                                {{$index+1}}、{{item.mater_name}}*{{item.mater_qty}} {{item.mater_status == 1?'已确认':'待确认'}}
                            </div>
                        </div>
                    </td>
                </tr>
                <tr class="order-jd">
                    <td>服务星级</td>
                    <td>
                        <div v-if="detail.star != ''">
                            <span :class="detail.star >= item ? 'curr-select' : 'no-select'" v-for="(item, index) in 5" :key="index"></span>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>建议与服务</td>
                    <td>{{detail.advice}}</td>
                </tr>
                <tr>
                    <td>问题图片</td>
                    <td>
                        <div class="imgLis" v-if="detail.imglis.length > 0">
                            <a v-for="(item, index) in detail.imglis" :key="index" href="javascript:void(0)" @click="showImgFn(item.url)">
                                <img v-if="item.url" :src="item.url">
                            </a>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>完成图片</td>
                    <td>
                        <div class="imgLis" v-if="detail.finishedimg.length > 0">
                            <a v-for="(item, index) in detail.finishedimg" :key="index" href="javascript:void(0)" @click="showImgFn(item)">
                                <img v-if="item" :src="item">
                            </a>
                        </div>
                    </td>
                </tr>
            </table>
        </div>

        <div class="lis-div-btn" v-if="types != 'mtain'">
            <span v-if="showdate">
                <button class="sms" v-if="handles.reminder && detail.attribute != 12" @click="reminderFn(detail.id,detail.statu,detail.sn)">催单</button>
                <button class="urge" v-if="handles.repeat && detail.catalogname !='急救单'" @click="repeatFn(detail.id)">重派</button>
            </span>
            <button class="del" v-if="handles.cancel" @click="cancelFn">销单</button>
            <button class="edit" v-if="detail.statu == 1 || detail.statu == 3 || detail.statu == 4" @click="editFn">修改</button>
        </div>

        <div class="lis-div-btn" v-if="types == 'mtain' && detail.tsid != 3">
            <button class="del" @click="cancelFn">销单</button>
        </div>

        <div class="imgPop" v-if="showImg.show" @click="showImg.show = false">
            <img :src="showImg.url">
        </div>

        <div class="handle-bg" v-if="isCancel" @click="isCancel = false"></div>
        <div class="cancel-pop" v-if="isCancel">
            <h4>销单备注</h4>
            <div class="textarea-box">
                <textarea v-model="des" @focus="showTxt=false" @blur="showTxt=true"></textarea>
                <div class="textarea-txt" v-if="showTxt && !des" @click="handleHide"><span class="inline-block">填写处理备注</span></div>
            </div>
            <div class="handle-box">
                <button class="btn close-btn" @click="isCancel = false">取消</button>
                <button class="btn ok-btn" @click="sureCancelFn">确定</button>
            </div>
        </div>

        <order-edit
            v-if='edit'
            @close='close'
            @sure="eidtsureFn"
            :setbadstatus="setBadStatus"
            :ishandle="isHandle"
            :detail="orderDetail"
            :hospital="hospital"
        ></order-edit>
    </div>
</template>
<script>
    import FullowUp from './FollowUp.vue'
    import SsFullow from './SsFollow.vue'
    import {formatSeconds} from '../common/com.js'
    import orderEdit from './order-edit.vue'
    import {updateUrl} from '../common/ajax'
    export default {
        components:{
            'order-edit': orderEdit,
            'fullow-up':FullowUp,
            'fullow-up-ss':SsFullow
        },
        props:{
            types:{
                type:String,
                default:'trans'
            },
            detail:{
                type:Object,
                default:function(){
                    return {}
                }
            },
            handles:{
                type:Object,
                default:function(){
                    return {
                        appraise:false,
                        cancel:false,
                        repeat:false,
                        reminder:false
                    }
                }
            },
            setBadStatus:'',
            showdate:{
                type: Boolean,
                default: true
            },
            hospital:''
        }
        ,
        data(){
            return{
                isCancel:false,
                des:'',
                showTxt:true,
                received_sec:12,
                finshed_sec:0,
                edit: false,
                showLis: {
                    address:""      //终点
                    ,askdept:""      //起点 - 需要判断
                    ,bedno:""
                    ,canceltime:""
                    ,createdtime:""
                    ,dept:""   //类别
                    ,fixedtime:""   //有内容的是预约单
                    ,guid:""
                    ,id:""
                    ,memo:""
                    ,name:""
                    ,obey:""      //预约单 0普通
                    ,statu:""
                    ,tasktime:""
                    ,tour:""
                },
                orderDetail: {},
                isHandle:true,
                showImg:{
                    show:false,
                    url:''
                },
                isConsumable:false //耗材
            }
        }
        ,methods:{
            showImgFn(url){ //查看图片
                this.showImg.show = true;
                this.showImg.url = url;
            },
            showConsumable(){ //查看耗材
                if(this.info.consumable.length > 0){
                    this.isConsumable = true
                }
            },
            reminderFn(id,statu,sn){
                this.$emit('reminder',id,statu,sn);
            },
            cancelFn(){
                this.isCancel = true;
                this.showTxt = false;
                setTimeout(function(){
                    jQuery('.textarea-box textarea').focus();
                },260)
            },
            handleHide(){
                jQuery('.textarea-box textarea').focus()
            },
            sureCancelFn(){
                if(jQuery.trim(this.des) == ''){
                    this.$Message({type:'error',message:'请填写销单理由！'});
                   return
                }
                this.isCancel = false;
                this.$emit('cancel',this.detail.id,this.des);
            },
            repeatFn(id){
                this.$emit('repeat',id);
            },
            editFn(){
                this.edit = true
            },
            close(){
                this.edit = false
            },
            eidtsureFn(data){
                this.isHandle = false;
                delete data.guid
                delete data.attribute
                jQuery.ajax({
                    url: updateUrl,
                    type:'post',
                    data: data,
                    dataType: 'json',
                    cache: false,
                    success: function(data) {
                        if(data.success){
                            this.$Message({type:'success',message:'订单修改成功！'});
                            this.$parent.hasAlter = true;
                            this.edit = false;
                            this.$emit('getData');
                            setTimeout(()=>{
                                this.orderDetail = this.detail
                            },100)
                        }else {
                            this.$parent.hasAlter = false;
                            throwErrorTips('订单修改失败',data.msg)
                        }
                        this.isHandle = true
                    }.bind(this),
                    error: function(xhr, textStatus) {
                        this.isHandle = true
                        this.$parent.hasAlter = false;
                        throwErrorTips('订单修改失败',xhr.status)
                    }.bind(this)
                });
            }
        },

        created() {
            this.orderDetail = this.detail
            this.received_sec = formatSeconds(this.detail.received_sec)
            this.finshed_sec = formatSeconds(this.detail.finshed_sec)
        }
    }
</script>
<style scoped lang="less">
    @import "../assets/less/order-detail.less";
</style>
